import {
  useImperativeHandle, forwardRef,useState,useRef
} from 'react';

import './propertyConfig.less'

import {
  Empty
} from 'antd';

//config comps
import RadioConfig from '@/components/ComponentConfig/RadioConfig';
import InputConfig from '@/components/ComponentConfig/InputConfig';
import SelectConfig from '@/components/ComponentConfig/SelectConfig';
import DatePickerConfig from '@/components/ComponentConfig/DatePicker';
import DateRange from '@/components/ComponentConfig/DateRange';
import CheckboxConfig from '@/components/ComponentConfig/Checkbox';
import UploadConfig from '@/components/ComponentConfig/Upload';
import StaffTreeConfig from '@/components/ComponentConfig/StaffTree/Config';
import OrgTreeConfig from '@/components/ComponentConfig/OrgTree/config';
import SubForm from '@/components/ComponentConfig/subForm/SubForm';
import SplitLineConfig from '@/components/ComponentConfig/SplitLineConfig';
import PlaceBolckConfig from '@/components/ComponentConfig/PlaceBolckConfig';


type PropsType = {
  onPropertyConfigChange:Function;
  onOpenValid:Function;
}

function PropertyConfig(props:PropsType,ref:any){

  const [config,setConfig] = useState<any>(null)
  const [editType,setEditType] = useState('comp');
  const propertyConfigRef = useRef<any>();

  useImperativeHandle(ref,()=>({
    setData:(item:any,type:string)=>{
      // console.log("PropertyConfig setData",item)
      setConfig(item)

      type && setEditType(type);
      
    },
    setScrollTop:()=>{
      if(propertyConfigRef.current){
        propertyConfigRef.current.scrollTop = 0;
      }
    }
  }))
  

  if(!config) return (
    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请拖拽添加组件" />
  )

  function onChangeCallback(data:any){
    props.onPropertyConfigChange(data);
    setConfig(data);
  }

  return (
    <div className="propertyConfig" ref={propertyConfigRef}>
      
      {
      config.name === 'input' ? <InputConfig config={config} onChangeCallback={onChangeCallback} onOpenValid={props.onOpenValid} />
      : config.name === 'select' ? <SelectConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'radio' ? <RadioConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'datePicker' ? <DatePickerConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'dateRange' ? <DateRange config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'checkbox' ? <CheckboxConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'upload' ? <UploadConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'staffTree' ? <StaffTreeConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'orgTree' ? <OrgTreeConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'subForm' ? <SubForm config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'splitLine' ? <SplitLineConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'placeBlock' ? <PlaceBolckConfig config={config} onChangeCallback={onChangeCallback} />
      : null
      
      }
      
    </div>
  )
}

export default forwardRef(PropertyConfig);
